import React from 'react';
import { View } from './View';
import { DataSource } from '../services/DataSource';

/**
 * ListView class - Displays multiple records in a grid format.
 */
export class ListView extends View {
  private _dataSource: DataSource;
  private _columns: any[] = [];
  private _selectedItem: any = null;

  /**
   * Create a new ListView
   * @param id View identifier
   * @param caption View caption
   * @param dataSource Data source for this view
   */
  constructor(id: string, caption: string, dataSource: DataSource) {
    super(id, caption);
    this._dataSource = dataSource;
    
    // Log ListView creation
    console.log(`ListView created: id=${id}, caption=${caption}`);
  }

  /**
   * Get the data source for this list view
   */
  public get dataSource(): DataSource {
    return this._dataSource;
  }

  /**
   * Set the columns to display in this list view
   * @param columns Array of column definitions
   */
  public setColumns(columns: any[]): void {
    this._columns = [...columns];
    console.log(`ListView ${this.id}: setColumns called with ${columns.length} columns`);
  }  /**
   * Get the columns displayed in this list view
   */
  public get columns(): any[] {
    return [...this._columns];
  }

  /**
   * Get the currently selected item
   */
  public get selectedItem(): any {
    return this._selectedItem;
  }

  /**
   * Set the currently selected item
   */
  public set selectedItem(value: any) {
    if (this._selectedItem !== value) {
      this._selectedItem = value;
      // Notify controllers about selection change
      this.controllers.forEach(controller => {
        controller.setView(this);
      });
    }
  }

  /**
   * Render this list view using DevExtreme DataGrid
   */
  public render(): any {
    // Debug information
    console.log(`ListView ${this.id}: render called, has ${this.controllers.length} controllers`);
    this.controllers.forEach(controller => {
      console.log(`ListView ${this.id}: Controller ${controller.id} has ${controller.actions.length} actions`);
      controller.actions.forEach(action => {
        console.log(`ListView ${this.id}: Action ${action.id}, visible=${action.visible}, enabled=${action.enabled}`);
      });
    });
    
    // Return information needed by the component
    return {
      caption: this.caption,
      columns: this.columns,
      dataSource: this._dataSource
    };
  }
}
